React Native Viewpager Carousel |
您所在的位置：网站首页 › react native viewpager github › React Native Viewpager Carousel |
React Native Viewpager Carousel
|
react-native-viewpager-carousel
React Native Viewpager Carousel
Feel free to make a pull request. I’m happy about every contribution. ExamplesYou can find example implementations for all use cases of this library in the repo react-native-viewpager-carousel-example-app. The example project is also linked as git submodule in this project. Installation yarn add react-native-viewpager-carouselor npm install --save react-native-viewpager-carousel Preview
The is the base component of the library. Till now it acts like a simple view-carousel: import { ViewPager } from 'react-native-viewpager-carousel' class ExampleCarousel extends PureComponent { constructor() { this.data = [ { title: 'title 1' }, { title: 'title 2' }, { title: 'title 3' }, ] } _renderPage = ({data}) => { return ( {item.title} ) } render() { return ( ) } } API prop name data type default functionality containerStyle style {} the component is wrapped into a . Styles to this can be assigned through this property contentContainerStyle style {} posibility to set styles to the content container (the entire scrollable area) data array [] a data array of objects dev boolean false draws a black line around the pages and tabs for debugging lazyrender boolean false lazyrender renders the active page only when its in the viewport lazyrenderThreshold number 1 determines how many threshold left and right the current visible page sould be rendered if lazyrender={true} renderAsCarousel boolean true renders the as endless carousel thresholdPages number 1 number of pages left and right of the scrollable content (sneak preview) pageWidth number width of page initialPage object {} key value pair of initial page: e. g. data=[{key:’page-a’}, {key:’page-b’}] & initialPage= scrollEnabled boolean true decleares wether the ViewPager should be able to scroll by user or not firePageChangeIfPassedScreenCenter boolean false toggle’s if onPageChange sould already be called when the dragged page passed half of the screen pagingEnabled boolean true experimentalMirroring boolean false toggles the mirroring of the scrollposition of the threshold views - more information here showNativeScrollIndicator boolean false native ScrollView indicator is disabled by default renderPage function () => {} render callback for content page onPageChange function () => {} callback when the page changes -> retuns the current pageNumber as first argument onScroll function () => {} callback when the content area scrolls TabbedPagerIn addition to the the component provides an additional renderFunction for Tabs above the content view. The following pseudo-code shows the basic usage with an as content and a as tab. import { TabbedPager } from 'react-native-viewpager-carousel' class ExampleCarousel extends PureComponent { constructor() { this.data = [ { title: 'title 1', url: 'http://...' }, { title: 'title 2', url: 'http://...' }, { title: 'title 3', url: 'http://...' }, ] } _renderTab = ({data}) => { return ( {data.title} ) } _renderPage = ({data}) => { return ( ) } render() { return ( ) } } API prop name data type default functionality data array [] a data array of objects dev boolean false draws a black line around the pages and tabs for debugging fullScreen boolean true draws the in full screen mode (flex 1) lazyrender boolean false lazyrender renders the active page only when its in the viewport lazyrenderThreshold number 1 determines how many threshold left and right the current visible page sould be rendered if lazyrender={true} renderAsCarousel boolean true renders the as endless carousel tabContainerPosition string ‘top’ could be ‘top’ || ‘bottom’ - places the tab container on top of the viewpager or on the bottom side scrollTabsEnabled boolean false firePageChangeIfPassedScreenCenter boolean false toggle’s if onPageChange sould already be called when the dragged page passed half of the screen staticTabWidth number initialPage object {} key value pair of initial page: e. g. data=[{key:’page-a’}, {key:’page-b’}] & initialPage= showTabIndicator boolean true toggles the tab indicator tabIndicatorColor string ‘transparent’ changes the color of the tab indicator tabIndicatorHeight number 2 height of tab indicator tabsVisible boolean true indicates if tabs should be visible or not DividerComponent any null renders a given Component between the tabs and the content area renderPage function () => {} render callback for content page renderTab function () => {} render callback for the tab onPageChange function () => {} callback when the page changes -> retuns the current pageNumber as first argument experimentalMirroring boolean false toggles the mirroring of the scrollposition of the threshold views - more information here This site is open source. Improve this page. |
【本文地址】